<#import "/manage/tpl/pageTep.ftl" as page>
<@page.pageBase currentMenu="机构活动">
<div class="xm-offline">
    <div class="row">
        <div class="panel">
            <div class="panel-header">
                <strong>新增机构活动</strong>
            </div>
            <div class="panel-body">
                <form id="addForm" class="form-horizontal" action="${basepath}/manage/offline/insertJson" method="post">
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            活动名称：
                        </label>

                        <div class="controls">
                            <input type="text" class="control-text span-width span10" name="name" placeholder="请输入活动名称">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            所属机构：
                        </label>

                        <div class="controls">
                            <div id="organizeIDSelect">
                                <input type="hidden" id="organizeID" name="organizeID" data-rules="{required : true}">
                            </div>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            开始时间：
                        </label>

                        <div class="controls">
                            <input type="text" class="calendar calendar-time"  name="beginTime"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            结束时间：
                        </label>
                        <div class="controls">
                            <input type="text" class="calendar calendar-time" name="endTime" />
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            活动地址：
                        </label>

                        <div class="controls">
                            <input type="text" class="control-text span-width span10" name="address">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            活动详情：
                        </label>

                        <div class="controls control-row4" style="height: 350px;">
                            <textarea type="text" class="input-large" name="content" id="content"></textarea>
                        </div>
                    </div>
                    <h3 class="offset2">活动图片
                        <a class="button button-primary pull-right" id="imagesBtn" style="height:20px">新增</a>
                    </h3>
                    <hr>
                    <input type="hidden" class="control-text span-width " name="picture" id="picture">

                    <div id="imagesGrid" class="xm-grid">

                    </div>
                    <div class="centered">
                        <button type="submit" class="button  button-large  button-success">立即发布</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    var editor = UE.getEditor('content' );
    var Grid = BUI.Grid;
    var Store = BUI.Data.Store;
    var Data = BUI.Data;
    var Calendar = BUI.Calendar;
    var Select = BUI.Select;
    var datePicker = new Calendar.DatePicker({
        trigger:'.calendar-time',
        showTime:true,
        autoRender : true
    });
    var addForm = new BUI.Form.Form({
        srcNode: '#addForm',
        submitType: 'ajax',
        callback: function (data) {
            if (data.success == true) {
                window.location.href="${basepath}/manage/offline/toList"
            } else {

            }
        }
    }).render();

    var addStore = new Data.Store({
        url : '${basepath}/manage/organize/selectAllList',
        autoLoad : true,
        root:'data'
    });
    var roleSelect = new Select.Select({
        render:'#organizeIDSelect',
        valueField:'#organizeID',
        list : {
            itemTpl : '<li>{name}</li>',
            idField : 'id',
            elCls:'bui-select-list'
        },
        store : addStore
    });

    roleSelect.render();
    /*--------------------------活动图片列表  begin--------------------*/

    /**
     * 图片信息
     * @type {*[]}
     */
    var imagesColumns = [
        {
            title: '图片', dataIndex: 'url', width: '30%', renderer: function (data) {
            return '<img src="${basepath}/' + data + '" width="100px" height="100px"/>'
        }
        },
        {
            title: '状态', dataIndex: 'state', width: '30%', renderer: function (data) {
            if (data == "SUCCESS") {
                return "上传成功";
            }
            return "上传失败";
        }
        },
        {
            title: '操作', dataIndex: 'title', width: '40%', renderer: function (data, obj, index) {
            return '<a href="javascript:delImages(' + index + ')">删除</a>';
        }
        }
    ];

    /**
     * 删除缓存图片信息
     * @param index
     */
    function delImages(index) {
        var record = imagesStore.findByIndex(index);
        imagesStore.remove(record);
        var imgStr = imagesStore.getResult();
        var imgArr = new Array();
        for (var i = 0; i < imgStr.length; i++) {
            imgArr[i] = imgStr[i].url
        }
        $("#picture").val(imgArr.join(","));
    }
    var imagesStore = new Store({});
    var imagesGrid = new Grid.Grid({
        render: '#imagesGrid',
        width: '100%',//如果表格使用百分比，这个属性一定要设置
        columns: imagesColumns,
        idField: 'title',
        store: imagesStore
    });
    imagesGrid.render();
    /*--------------------------活动图片列表  end--------------------*/

    /*------------------------图片上传插件配置  begin-----------------------*/
    var uploader = WebUploader.create({
        auto: true,
        swf: '${staticpath}/ueditor/third-party/webuploader/Uploader.swf',
        server: '${basepath}/manage/ued/config?action=uploadimage',
        pick: '#imagesBtn',
        resize: false,
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,'
        }
    });

    uploader.on('uploadSuccess', function (file, response) {
        uploader.removeFile(file);
        imagesStore.add(response);
        var imgStr = imagesStore.getResult();
        var imgArr = new Array();
        for (var i = 0; i < imgStr.length; i++) {
            imgArr[i] = imgStr[i].url
        }
        $("#picture").val(imgArr.join(","));
    });
    /*------------------------图片上传插件配置  end-----------------------*/
</script>

</@page.pageBase>